<template>
    <div class="panel-tab__content">
        <base-form
            :formItems="baseFormConfig.formItems"
            :formData="baseFormConfig.formSubmit"
            :formConfig="baseFormConfig.formConfig"
            :formRules="baseFormConfig.formRule"
            @onInputChange="updateBaseInfo"
            @onSwitchChange="updateBaseInfo"
            ref="baseForm"
        />
    </div>
</template>
<script>
import BaseForm from '@/components/baseForm/index'
import { setFormItemProp } from '@/utils/tool'
export default {
    components: {
        BaseForm
    },
    name: 'ElementBaseInfo',
    props: {
        businessObject: Object,
        type: String,
        idEditDisabled: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            baseFormConfig: {
                formItems: [
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入ID',
                            label: 'ID',
                            prop: 'id',
                            width: 'w-1',
                            isShow: true
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入名称',
                            label: '名称',
                            prop: 'name',
                            width: 'w-1',
                            isShow: true
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入版本标签',
                            label: '版本标签',
                            prop: 'versionTag',
                            width: 'w-1',
                            clearable: true,
                            isShow: false
                        }
                    ],
                    [
                        {
                            ltype: 'switch',
                            label: '可执行',
                            prop: 'isExecutable',
                            isShow: false
                        }
                    ]
                ],
                formSubmit: {},
                formConfig: {
                    labelPosition: 'left', // label对齐方式
                    labelWidth: '80px',
                    size: 'mini'
                },
                // 搜索控件是否显示
                searchContenerShow: true
            }
        }
    },
    watch: {
        businessObject: {
            immediate: false,
            handler: function(val) {
                if (val) {
                    this.$nextTick(() => this.resetBaseInfo())
                }
            }
        }
    },
    methods: {
        resetBaseInfo() {
            this.bpmnElement = window?.bpmnInstances?.bpmnElement
            const datas = this.$_.cloneDeep(this.bpmnElement.businessObject)
            for (const key in datas) {
                if (Object.hasOwnProperty.call(datas, key)) {
                    this.$set(this.baseFormConfig.formSubmit, key, datas[key])
                }
            }
            const showProp = ['versionTag', 'isExecutable'] // 根据条件显示的表单项
            this.baseFormConfig.formItems.forEach(values => {
                values.forEach(val => {
                    if (showProp.indexOf(val.prop) > -1) {
                        if (
                            this.baseFormConfig.formSubmit.$type ===
                            'bpmn:Process'
                        ) {
                            setFormItemProp(
                                this.baseFormConfig.formItems,
                                val.prop,
                                'isShow',
                                true
                            )
                        } else {
                            setFormItemProp(
                                this.baseFormConfig.formItems,
                                val.prop,
                                'isShow',
                                false
                            )
                        }
                    }
                })
            })
        },
        updateBaseInfo(key) {
            const attrObj = Object.create(null)
            attrObj[key.prop] = this.baseFormConfig.formSubmit[key.prop]
            if (key.prop === 'id') {
                window.bpmnInstances.modeling.updateProperties(
                    this.bpmnElement,
                    {
                        id: this.baseFormConfig.formSubmit[key.prop],
                        di: {
                            id: `${this.baseFormConfig.formSubmit[key.prop]}_di`
                        }
                    }
                )
            } else {
                window.bpmnInstances.modeling.updateProperties(
                    this.bpmnElement,
                    attrObj
                )
            }
        }
    },
    beforeDestroy() {
        this.bpmnElement = null
    }
}
</script>
